<template >
  <div class="cardvolume">
    <!-- 顶部部分 -->
    <div class="topWrapper">
      <div class="toplogoWrapper">
        <div class="topImageWrapper">
          <img :src="logoImage" alt="">
        </div>
      </div>
      <div class="topBackImageWrapper">
        <img :src="cardTop" alt="" srcset="">
      </div>
      <div class="cardtopTextWrapper">
        <span>新用户专享</span>
      </div>
      <div :style="{backgroundImage:`url(${topback})`}" class="cardvolumeContent">
        <div class="colorChange">
          <span style="font-size: 14px">活动时间： 5月17日~7月31日</span>
        </div>
        <div :style="{backgroundImage:`url(${cardExample})`}" class="exampleCard">
          <div class="userMoney">50元会员抵用卷</div>
          <!-- <a href="https://www.baidu.com"><div class="nowUse">立即领取</div></a> -->
          <!-- <div class="nowUse">卡券已领完</div> -->
          <div class="nowUse" @click="getUrlList">立即领取</div>
        </div>
      </div>
    </div>
    <!-- 底部部分 -->
    <div class="bottomWrapper">
      <div class="topBackImageWrapper">
        <img :src="bottomtitle" alt="" srcset="">
      </div>
      <div class="cardtopTextWrapper">
        <span style="color: #EC4800">新用户</span><span style="color: #008958">领劵更多优惠</span>
      </div>
      <div :style="{backgroundImage:`url(${bottomback})`}" class="bottomOneWrapper">
        <div :style="{backgroundImage:`url(${excellback})`}" class="bottomOne">
          <svg-icon icon-class="speed" class="svgWrapper"/>
          <div class="svgtext" style="font-size: 16px;font-weight: bold;">极速办理</div>
          <div class="svgtext" style="color: #333333">申办ETC</div>
          <div class="svgtext" style="color: #333333">60S搞定</div>
          <div class="svgtext" style="color: #333333">免银行卡</div>
          <div class="svgtext" style="color: #333333">免圈存</div>
        </div>
        <div :style="{backgroundImage:`url(${excellback})`}" class="bottomOne">
          <svg-icon icon-class="gscx" class="svgWrapper"/>
          <div class="svgtext" style="font-size: 16px;font-weight: bold;">高速畅行</div>
          <div class="svgtext" style="color: #333333">先通行</div>
          <div class="svgtext" style="color: #333333">后付费</div>
          <div class="svgtext" style="color: #333333">收费站秒过</div>
        </div>
        <div :style="{backgroundImage:`url(${excellback})`}" class="bottomOne">
          <svg-icon icon-class="vip" class="svgWrapper"/>
          <div class="svgtext" style="font-size: 16px;font-weight: bold;">VIP专享</div>
          <div class="svgtext" style="color: #333333">洗车</div>
          <div class="svgtext" style="color: #333333">代驾</div>
          <div class="svgtext" style="color: #333333">加油</div>
          <div class="svgtext" style="color: #333333">超多福利</div>
        </div>
      </div>
      <!-- 版权声明 -->
      <div class="publishWrapper">
        <div>世纪恒通科技股份有限公司 @2019</div>
        <div class="serialWrapper">贵ICP83478578-3478号</div>
      </div>
    </div>
  </div>
</template>
<script>
import logoImageTemp from '@/assets/img/etclogo.png'
import cardTopTemp from '@/assets/img/activity/actitle.png'
import cardMiddleTemp from '@/assets/img/cardmiddle.png'
import cardCommon from '@/assets/img/cardcommon.png'
import cardMoney from '@/assets/img/cardmoney.png'
import cardExample from '@/assets/img/activity/cardexample.png'
import cardLeft from '@/assets/img/activity/circle.png'
import cardRight from '@/assets/img/activity/circle.png'
import bottomtitle from '@/assets/img/activity/bottomtitle.png'

import bottomback from '@/assets/img/activity/bottomback.png'
import topback from '@/assets/img/activity/topback.png'
import excellback from '@/assets/img/activity/excellback.png'

export default {
  components: {
  },
  data() {
    return {
      logoImage: logoImageTemp,
      cardTop: cardTopTemp,
      cardMiddle: cardMiddleTemp,
      cardCommon: cardCommon,
      cardMoney: cardMoney,
      cardExample,
      cardLeft,
      cardRight,
      bottomtitle,
      bottomback,
      topback,
      excellback
    }
  },
  created() {
  },
  methods: {
    // 获取卡卷html
    getCardVolumeHtml() {
      const _self = this
      _self.$http.get('/card/mpNewsGetHtml?cardId=p-AA-0Xk0NwJ5RBWdazR3e9CgH38').then(response => {
        if (response.data.errcode === '0') {
          _self.content = response.data.content
        }
      }).catch(errMsg => {
        _self.$message({
          message: '获取卡卷错误' + errMsg,
          type: 'error'
        })
      })
    },
    // 跳转外部链接
    getUrlList() {
      this.$http.get('/Config/list?name=subscribe&offset=0&limit=10').then(response => {
        if (response.data.code === 0) {
          if (response.data.data.rows.length > 0) {
            window.location.href = JSON.parse(response.data.data.rows[0].value).url
          }
        }
      }).catch(error => {
        this.$message({
          showClose: true,
          message: '获取资源列表异常{' + error + '}',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/variables.scss';
.cardvolume {
  background-color: #53A949;
  width: 100%;
  height: 100%;
  .topWrapper {
    .toplogoWrapper {
      display: flex;
      padding: 10px 10px;
      .topImageWrapper {
        img {
          width: 65px;
          height: 46px;
        }
      }
    }
    .topBackImageWrapper {
      position: absolute;
      margin-top: -10px;
      width: 100%;
      text-align: center;
      img {
        width: 267px;
        height: 60px;
      }
    }
    .cardtopTextWrapper {
      color: white;
      line-height: 35px;
      font-size: 30px;
      width: 100%;
      position: absolute;
      text-align: center;
    }
    .cardvolumeContent {
      width: 90%;
      margin: 0 auto;
      margin-top: 30px;
      padding-top: 20px;
      padding-bottom: 0px;
      height: 255px;
      background-repeat: no-repeat;
      background-size: cover;
      .colorChange {
        color: white;
        width: 226px;
        margin: 0 auto;
        margin-top: 10px;
        border-radius: 15px;
        padding: 5px 5px;
        text-align: center;
        background: linear-gradient(to right,#eeb865,#e48157);
      }
      .exampleCard {
        z-index: 5555;
        width: 300px;
        height: 149px;
        margin: 0 auto;
        margin-top: 20px;
        background-repeat: no-repeat;
        background-size: cover;
        .userMoney {
          text-align: center;
          color: #6EB982;
          padding-top: 30px;
          font-size: 35px;
        }
        .nowUse {
          cursor: pointer;
          margin-top: 40px;
          font-size: 25px;
          text-align: center;
          color: white;
        }
      }
    }
  }
  .bottomWrapper {
    width: 100%;
    background-color: #53A949;
    .topBackImageWrapper {
      position: absolute;
      margin-top: -20px;
      width: 100%;
      text-align: center;
      img {
        width: 250px;
        height: 40px;
      }
    }
    .cardtopTextWrapper {
      color: white;
      line-height: 0px;
      font-size: 20px;
      width: 100%;
      position: absolute;
      text-align: center;
    }
    .bottomOneWrapper {
      width: 90%;
      margin: 0 auto;
      margin-top: 40px;
      height: 265px;
      background-repeat: no-repeat;
      background-size: cover;
      padding-top: 40px;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-around;
      .bottomOne {
        background-repeat: no-repeat;
        background-size: cover;
        color:#22AC38;
        text-align: center;
        padding: 10px 0px;
        border-radius: 5px;
        width: 110px;
        .svgWrapper {
          width: 35px;
          height: 35px;
          color: red;
        }
        .svgtext {
          margin-top: 10px;
          font-size: 15px;
        }
      }
    }
    .publishWrapper {
      padding-bottom: 30px;
      color: white;
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
      .serialWrapper {
        margin-top: 5px;
      }
    }
  }
}
</style>
<style>

